import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * 输入框类型有效值
 */
const InputTypes = ['text', 'number', 'idcard', 'digit', 'textarea', 'password', 'select'] as const
export type InputType = typeof InputTypes[number]

/**
 * 输入框文字对齐方式有效值
 */
const InputAligns = ['left', 'center', 'right'] as const
export type InputAlign = typeof InputAligns[number]

/**
 * confirmType有效值
 */
const ConfirmTypes = ['send', 'search', 'next', 'go', 'done'] as const
export type ConfirmType = typeof ConfirmTypes[number]

/**
 * props参数
 */
export const inputProps = {
  /** modelValue */
  modelValue: {
    type: String,
    default: ''
  },
  /** 输入框高度, 单位rpx */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 输入框类型 */
  type: {
    type: String,
    default: 'text',
    validator: (value: InputType) => {
      return InputTypes.includes(value)
    }
  },
  /** 使用自定义键盘 */
  customKeyboard: {
    type: Boolean,
    default: false
  },
  /** 输入框文字对齐方式 */
  inputAlign: {
    type: String,
    default: 'left',
    validator: (value: InputAlign) => {
      return InputAligns.includes(value)
    }
  },
  /** 输入框为空时占位符 */
  placeholder: {
    type: String,
    default: ''
  },
  /** 指定 placeholder 的样式 */
  placeholderStyle: {
    type: String,
    default: ''
  },
  /** 是否禁用 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 最大输入长度，设置为 -1 的时候不限制最大长度 */
  maxlength: {
    type: Number,
    default: 255
  },
  /** 根据内容自动调整高度, 仅在 type="textarea" 时生效, 设置为true后height不生效 */
  autoHeight: {
    type: Boolean,
    default: true
  },
  /** 设置键盘右下角按钮的文字 */
  confirmType: {
    type: String,
    default: (): ConfirmType => {
      return 'done'
    },
    validator: (value: ConfirmType) => {
      return ConfirmTypes.includes(value)
    }
  },
  /** 固定输入框, 仅在 type="textarea" 时生效 */
  fixed: {
    type: Boolean,
    default: false
  },
  /** 获取焦点 */
  focus: {
    type: Boolean,
    default: false
  },
  /** 显示边框, 仅在 type="text/textarea" 时生效 */
  border: {
    type: Boolean,
    default: false
  },
  /** border边框颜色, 当border为true时才生效 */
  borderColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('border', value)
    }
  },
  /** 显示右侧显示/隐藏密码图标, 仅在 type="password" 时生效 */
  passwordIcon: {
    type: Boolean,
    default: true
  },
  /** selectOpen, 打开select可选项, 仅在 type="select" 时生效 */
  selectOpen: {
    type: Boolean,
    default: false
  },
  /** 显示清空按钮 */
  clearable: {
    type: Boolean,
    default: true
  },
  /** 指定光标与键盘的距离，单位 px */
  cursorSpacing: {
    type: Number,
    default: 0
  },
  /** 光标起始位置，自动聚集时有效，需与selection-end搭配使用 */
  selectionStart: {
    type: Number,
    default: -1
  },
  /** 光标结束位置，自动聚集时有效，需与selection-start搭配使用 */
  selectionEnd: {
    type: Number,
    default: -1
  },
  /** 是否显示键盘上方带有”完成“按钮那一栏 */
  showConfirmBar: {
    type: Boolean,
    default: true
  },
  /** 右图标名称, 在除了 type="text"时有效 */
  rightIcon: {
    type: String,
    default: ''
  },
  /** 自动去除两端空格 */
  trim: {
    type: Boolean,
    default: true
  },
  /** 输入时是否触发表单验证 */
  validateEvent: {
    type: Boolean,
    default: true
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  }
}
export type InputProps = ExtractPropTypes<typeof inputProps>

export const inputEmits = {
  [UPDATE_MODEL_EVENT]: (value: string) => typeof value === 'string',
  /** 数据发生修改时触发 */
  change: (value: string) => typeof value === 'string',
  /** 输入框聚焦时触发 */
  focus: () => true,
  /** 输入框失去焦点时触发 */
  blur: (value: string) => typeof value === 'string',
  /** 点击完成时触发 */
  confirm: (value: string) => typeof value === 'string',
  /** 点击事件 */
  click: () => true
}
export type InputEmits = typeof inputEmits
